<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" />
  <style>
    #form {
      width: 400px;
      margin: 0 auto;
      margin-top: 100px;
    }

    h1 {
      text-align: center;
    }

    input[type='submit'] {
      width: 100%;
    }
  </style>
</head>

<body>
  <form id="form">
    <h1>注册页面</h1>
    <div class="form-group">
      <input type="text" name="username" id="username" class="form-control input-lg" placeholder="用户名" required>
    </div>

    <div class="form-group">
      <input type="password" name="password" id="password" class="form-control input-lg" placeholder="密码" required>
    </div>

    <div class="form-group">
      <input type="text" name="nickname" id="nickname" class="form-control input-lg" placeholder="昵称" required>
    </div>

    <div class="form-group">
      <input type="submit" value="注册新用户" class="btn btn-primary btn-lg">
    </div>
  </form>

  <script src="/node_modules/jquery/dist/jquery.min.js"></script>
  <script>
      $(function (){
        // 表单提交
        $('#form').on('submit',function(event){
            // 阻止表单get提交的默认行为
            event.preventDefault();

            // 发送异步ajax请求 --  向后台发送注册表单信息
            $.ajax({
                type:'post',
                url:'/addUser',
                data:$(this).serialize(),
                dataType:'json',
                success:function(res){
                  // 有错   --  注册失败，返回提示  
                  if(res.status == 0 ){
                      alert(res.msg);
                  }else {
                    // 重置表单 --  还原
                    $('#form')[0].reset();

                    // 跳转到登录页面
                    location.href = '/login';
                  };
                }
            });
        });
      })
  </script>
</body>
</html>